<template>
  <div>
    <div class="headtitle">
      账号
    </div>
    <div class="itembox">
      <router-link to="/datum">
        <div class="leftnav">
          <i class="el-icon-user-solid"></i>
          <p>个人资料</p>
        </div>
        <div class="rightnav">
          <i class="el-icon-arrow-right"></i>
        </div>
      </router-link>
    </div>
    <div class="itembox">
      <router-link
        to="/car"
        style="borderBottom: 0.01rem solid rgba(153, 153, 153, 0.1);"
      >
        <div class="leftnav">
          <i class="el-icon-shopping-cart-1"></i>
          <p>我的购物车</p>
        </div>
        <div class="rightnav">
          <i class="el-icon-arrow-right"></i></div
      ></router-link>
      <router-link to="/order">
        <div class="leftnav">
          <i class="el-icon-document"></i>
          <p>我的订单</p>
        </div>
        <div class="rightnav">
          <i class="el-icon-arrow-right"></i>
        </div>
      </router-link>
    </div>
    <div class="itembox">
      <van-button
        type="primary"
        block
        color="linear-gradient(to right, #ff6034, #ee0a24)"
        v-if="$store.state.user.userid"
        @click="logout"
        >退出登录</van-button
      >
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Button } from "vant";

Vue.use(Button);
export default {
  methods: {
    logout() {
      localStorage.removeItem("vuex");
      this.$store.commit('LOGOUT')
      this.$router.push('/login')
    },
  },
};
</script>

<style scoped>
.headtitle {
  height: 0.96rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.32rem;
  color: #3c4a54;
  font-weight: bold;
  background-color: #ffffff;
}
.itembox {
  background-color: #ffffff;
  margin: 0.2rem 0;
  padding: 0 0.24rem;
}
.itembox a {
  display: flex;
  height: 0.9rem;
  align-items: center;
  justify-content: space-between;
}
.leftnav {
  display: flex;
  font-size: 0.28rem;
}
.leftnav i {
  color: #99a4bd;
  margin-right: 0.1rem;
}
</style>
